import { defineComponent } from 'vue'
import { ButtonHTMLAttributes, PropType } from 'vue'
import './index.less'

export type ButtonType =
	| 'default'
	| 'primary'
	| 'success'
	| 'warning'
	| 'danger'

export type ButtonSize = 'large' | 'normal' | 'small' | 'mini'

export default defineComponent({
	props: {
		text: String,
		loading: Boolean,
		plain: Boolean,
		block: Boolean,
		type: {
			type: String as PropType<ButtonType>,
			default: 'default'
		},
		size: {
			type: String as PropType<ButtonSize>,
			default: 'noraml'
		},
		htmlType: {
			type: String as PropType<ButtonHTMLAttributes['type']>,
			default: 'button'
		}
	},

	setup(props, { slots }) {
		return () => (
			<button
				class={[
					'my-button',
					props.type,
					props.size,
					props.block && 'block',
					props.plain && 'plain'
				]}
				type={props.htmlType}
			>
				<div class="my-button-content">
					<span>{slots.default?.() || props.text}</span>
				</div>
			</button>
		)
	}
})
